<script setup lang="ts">
import EchartBar from '@/components/Echart/Bar/BarChart.vue'
import * as echarts from 'echarts'
import { reactive } from '@vue/reactivity'
const chartData = reactive({
  name: 'globalMemberAges',
  stack: 'total',
  legend: {
    bottom: '15',
    itemWidth: 8,
    itemHeight: 8,
    textStyle: {
      fontSize: 12,
      lineHeight: 13,
      color: '#fff',
    },
  },
  grid: {
    left: '10%',
    right: '20%',
    bottom: '5%',
    top: '10%',
    containLabel: true,
  },
  xAxis: {
    type: 'value',

    show: false,
  },
  yAxis: {
    type: 'category',
    data: ['中国区', '亚太区', '美洲区', '欧美区', '非洲区'],
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    inverse: true,
    axisLabel: {
      color: '#ffffff',
      fontSize: 12,
    },
  },

  series: [
    {
      name: '0-20',
      type: 'bar',
      stack: 'total',
      barWidth: 10,
      emphasis: {
        focus: 'series',
      },
      data: [900, 700, 700, 800, 1000],
      itemStyle: {
        color: '#f7fa5f',
      },
    },
    {
      name: '20-30',
      type: 'bar',
      stack: 'total',
      barWidth: 10,
      emphasis: {
        focus: 'series',
      },

      data: [900, 700, 700, 800, 1000],
      itemStyle: {
        color: '#7ec263',
      },
    },
    {
      name: '30-40',
      type: 'bar',
      barWidth: 10,
      stack: 'total',
      emphasis: {
        focus: 'series',
      },
      data: [500, 300, 300, 300, 500],
      itemStyle: {
        color: '#5871b7',
      },
    },
    {
      name: '40-50',
      type: 'bar',
      stack: 'total',
      barWidth: 10,
      emphasis: {
        focus: 'series',
      },
      data: [500, 300, 300, 300, 500],
      itemStyle: {
        color: '#48d4f9',
      },
    },
    {
      name: '50-60',
      type: 'bar',
      stack: 'total',
      barWidth: 10,
      emphasis: {
        focus: 'series',
      },
      data: [500, 300, 300, 300, 500],
      itemStyle: {
        color: '#01affa',
      },
    },
    {
      name: '60以上',
      type: 'bar',
      stack: 'total',
      barWidth: 10,
      emphasis: {
        focus: 'series',
      },
      data: [200, 300, 300, 300, 200],
      itemStyle: {
        color: '#20e0d6',
      },
    },
  ],
})
</script>
<template>
  <el-carousel-item>
    <card-box>
      <template v-slot:title>
        <h1 class="titlte">全球会员年龄</h1>
      </template>
      <EchartBar :chart-data="chartData"></EchartBar>
    </card-box>
  </el-carousel-item>
</template>
